<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="选择客户"
      :visible.sync="visible"
      width="35%"
      :append-to-body="true"
      @closed="reset"
    >
      <div class="page">
        <lb-table
          ref="lbTable"
          v-el-height-adaptive-table="{bottomOffset:10}"
          border
          class="table-list"
          element-loading-text="加载中"
          :column="tableData.column"
          :data="tableData.data"
          pagination
          :total="tableData.total"
          custom-column
          @select="dialogCheck"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">关闭</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  //   import { formatColumnMap, parseTime } from '@/utils'
  //   import { mapGetters } from 'vuex'
  //   import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    components: {

    },
    props: {
    //   csmTypeMap: {
    //     type: Array,
    //     default: []
    //   },
    //   csmStatusMap: {
    //     type: Array,
    //     default: []
    //   },
    //   subTypeAllList: {
    //     type: Array,
    //     default: []
    //   }
    },
    data() {
      return {
        visible: false,
        selectioned: {},
        tableData: {
          data: [],
          total: 0,
          column: [
            {
              type: 'selection'
            },
            {
              type: 'index'
            },
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 105
              // render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.csmCode}</el-link>
            },
            {
              prop: 'csmName',
              label: '客户名称',
              showOverflowTooltip: true
            },
            {
              prop: 'csmRgPhone',
              width: 110,
              label: '联系电话'
            },
            {
              prop: 'sfzh',
              width: 180,
              label: '身份证号'
            }
            // {
            //   prop: 'csmStatus',
            //   label: '客户状态',
            //   render: (h, { row }) => <span>{ row.csmStatus && formatColumnMap(this.csmStatusMap, 'value', row.csmStatus, 'desc') }</span>
            // },
            // {
            //   prop: 'csmType',
            //   label: '客户类型',
            //   render: (h, { row }) => <span>{ row.csmType && formatColumnMap(this.csmTypeMap, 'value', row.csmType, 'desc') }</span>
            // },
            // {
            //   prop: 'csmRgAddress',
            //   width: 200,
            //   label: '地址'
            // }
          ]
        }
      }
    },
    computed: {
    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(data) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (data) {
            this.tableData.data = data
            this.tableData.total = this.tableData.data.length
          }
        })
      },
      dialogCheck(selection, row) {
        this.$refs.lbTable.clearSelection()
        if (selection.length === 0) { // 判断selection是否有值存在
          return
        }
        if (row) {
          this.selectioned = row
          this.$refs.lbTable.toggleRowSelection(row, true)
        }
      },
      save() {
        this.resolve(this.selectioned)
        this.visible = false
      },
      reset() {
        this.selectioned = {}
        this.tableData.data = []
        this.tableData.datatotal = 0
        this.visible = false
      }
    }
  }
</script>

<style lang='scss' scoped>
  .table-list {
    width: 100%;
    height: 250px;
    /deep/ .el-table {
      height: 200px !important;
      overflow: auto;
      .el-table__body-wrapper {
        height: auto !important;
      }
    }
    /deep/ .has-gutter {
      .el-checkbox {
        display: none;
      }
    }
  }
</style>
